<%--
 * Título: gestHora. Aplicación web de gestión de horarios para conservatorios.
 * Alumnos:
 * - Javier Pardo Muñoz. I.T. Informática de Gestión
 * - Antonio Prior Cazorla. I.T. Informática de Gestión
 * Director: Dr. José Raúl Romero Salguero.
 *     
 *  Copyright (C) 2013 Javier Pardo Muñoz / Antonio Prior Cazorla
 *
 *  This program is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.

 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<jsp:useBean id="MsgBean" class="es.uco.gesthora.interfaz.MsgBean" scope="session"/>

<html>

    <head>
        <link rel="stylesheet" type="text/css" href="/gestHora/css/general.css">
        
        <script type="text/javascript" src="/gestHora/js/ajax/especialidades.js"></script> 
        <script type="text/javascript" src="/gestHora/js/jQuery.js"></script> 
        <script type="text/javascript" src="/gestHora/js/menu.js"></script>  

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="icon" type="image/png" href="/gestHora/img/favicon.png" />
        <script type="text/javascript">
$(document).ready(function() {
    rellenarSelectEspecialidad();
});
            function comprobarPassword() {
                var password1 = document.getElementById('nuevoPassword');
                var password2 = document.getElementById('nuevoPassword2');

                if (password1.value != password2.value) {
                    password2.setCustomValidity('Deben coincidir las contraseñas');
                } else {
                    password2.setCustomValidity('');
                }
            }

        </script>

        <title>gestHora: Registro de nuevo usuario</title>
    </head>

    <body>

        <div class="contenedor">

            <jsp:include page="/jsp/views/header.jsp"/>

            <div class="contenido">
                <div class="contenido-dentro">
                    <div class="contenido-principal contenido-principal-index" role="main">

                        <section class="contenido-articulo contenido-articulo-index">
                            <a class="volver" href="javascript:history.go(-1)"> &#8592; Volver atrás</a><br/>
                            <h2>Registro de nuevo usuario</h2>

                            <% if (MsgBean.getMsg().equals("")) {%>
                            <p>Si desea registrarse en el sistema gestHora complete todos los campos de la solicitud y pulse enviar.<br/>
                                Recibirá un correo en su bandeja de entrada para activar la cuenta de usuario. </p>
                            <br/>

                            <form class="formVistas" id="registro" method="post" action="/gestHora/jsp/controllers/gestionUsuarioController.jsp?tipo=registro">

                                <fieldset>                                

                                    <label for="nuevoUsuario">Usuario: </label>
                                    <input type="text" id="nuevoUsuario" name="nuevoUsuario" pattern="[0-9a-z]{5,15}"  placeholder="juansanz" tabindex="1" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Debe tener entre 5 y 15 caracteres (válidos a-z y 0-9)</span></span><br/>

                                    <label for="nuevoPassword">Contraseña: </label>
                                    <input type="password" id="nuevoPassword" name="nuevoPassword" pattern="[0-9a-z]{5,15}"  tabindex="2" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Debe tener entre 5 y 15 caracteres (válidos a-z y 0-9)</span></span><br/>

                                    <label for="nuevoPassword2">Repita la contraseña: </label>
                                    <input type="password" id="nuevoPassword2"  name="nuevoPassword2" pattern="[0-9a-z]{5,15}" tabindex="3" oninput="comprobarPassword();" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Debe tener entre 5 y 15 caracteres (válidos a-z y 0-9)</span></span><br/>

                                    <label for="nuevoNombre">Nombre: </label>
                                    <input type="text" id="nuevoNombre" name="nuevoNombre" placeholder="Juan" tabindex="4" required /><br/>

                                    <label for="nuevoApellido1">1º Apellido: </label>
                                    <input type="text" id="nuevoApellido1" name="nuevoApellido1" placeholder="Sanz" tabindex="5" required /><br/>

                                    <label for="nuevoApellido2">2º Apellido: </label>
                                    <input type="text" id="nuevoApellido2" name="nuevoApellido2" placeholder="López" tabindex="6" required /><br/>

                                    <label for="nuevoDni">DNI:</label>
                                    <input type="text" id="nuevoDni" name="nuevoDni" maxlength="9" pattern="[0-9]{8}[A-Z]{1}" placeholder="12345678A" tabindex="7" required />
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Debe seguir el formato 00000000A</span></span><br/>

                                    <label for="nuevoEmail">Correo electrónico:</label>
                                    <input type="email" id="nuevoEmail" name="nuevoEmail" placeholder="juansanz@email.com" tabindex="8" required/>
                                    <span class="tooltip"><img src="/gestHora/img/help.png"/><span>Asegúrese de que sea un email válido</span></span><br/>

                                    <label for="selectEspecialidad">Especialidad: </label><select id='selectEspecialidad' name='selectEspecialidad' tabindex="9">
                                        <option value="" selected>Seleccione una especialidad</option>
                                    </select><br/>
                                    <button name="enviar" value="consultar" type="submit">Enviar</button>
                                    <button type="reset">Limpiar</button><br/>

                                </fieldset>

                            </form>               

                            <% } else {%>

                            <p><%=MsgBean.getMsg()%></p>

                            <% MsgBean.setMsg("");%>

                            <% }%>


                        </section>
                    </div>
                </div>

                <jsp:include page="/jsp/views/footer.jsp"/>

            </div>
        </div>

    </body>
</html>
